//声明全局变量
//var all = "全局变量"
//声明全局方法
// function init() {
//     getFrom();
// }
//调用全局方法
// init() 
//自己声明一个初始化方法，作用：统一管理页面初始化全局需要调用的方法，并方便排查错误、控制执行顺序
init();
function init() {
    getFrom();
}

//获取动态表单
function getFrom() {
    axios.get('http://172.22.144.233:8082/clockApp/api/form/findAll')
        .then(function (res) {
            //动态生成from
            tableShow(res.data.data);
        })
        .catch(function (error) {
            console.log(error);
        })
}

function tableShow(data) {
    //初始化form信息
    var formId = data.formId;
    var name = data.formName;
    var detail = data.formDetail;

    document.querySelector(".formName").innerHTML = name;
    document.querySelector(".formDetail").innerHTML = detail;
    //总容器
    var container = document.getElementById('all');

    for (var key in data.customElemenVoList) {
        var item = data.customElemenVoList[key];
        var elementType = item.elementType;
        if ("checkBox" === elementType) {
            var Name = item.elementName;
            var Detail = item.elementDetail;
            var elementValueList = item.elementValueList;
            var number = Number(key) + 1;
            var id = "row-" + number;
            var classId = id + "-content";
            //动态生成div
            var div = document.createElement('div');
            div.id = id;
            div.className = "row2";
            //向容器里初始化
            container.appendChild(div);
            var checkBox =
                "<div class=\"title\">" + number + "." + Name + "</div>" +
                "<div class=\"detai\">" + Detail + "</div>" +
                "<div class=\"" + classId + "\">" + "</div>";
            //初始化div
            document.getElementById(id).innerHTML = checkBox;

            //内容
            var str = '';
            var optionsVoList = item.optionsVoList;
            for (let i = 0; i < optionsVoList.length; i++) {
                //回显打钩
                var option = optionsVoList[i];
                console.log(option);
                var optionId = option.optionId;
                var isChecked = elementValueList.includes(optionId) ? 'checked="checked"' : '';
                console.log(isChecked);
                str += '<div class="tabContent"> <input value="' + optionId + '"type="checkbox" class="contentItem"' + isChecked + '>' + optionsVoList[i].optionValue + '</div>';
            }
            document.getElementsByClassName(classId)[0].innerHTML = str;

        } else if ("text" === elementType) {
            // 所学视频名称
            var elementName = item.elementName;
            var elementDetail = item.elementDetail;
            var elementValueList = item.elementValueList;
            var number = Number(key) + 1;
            var id = "row-" + number;

            var div = document.createElement('div');
            div.id = id;
            div.className = "row3";

            var text = " <div  class=\"title\">" + number + "." + elementName + "</div>" +
                "           <div  class=\"detail\">" + elementDetail + "</div>" +
                "           <div class=\"content\">" +
                "           <input type=\"text\" id=\"content-text\"  required>" +
                "           </div>";

            div.innerHTML = text;

            //回显
            if (elementValueList.length > 0) {
                div.querySelector("#content-text").value = elementValueList[0];
            }
            container.appendChild(div);
        }
        else if ("textButton" === elementType) {
            var Name = item.elementName;
            var Detail = item.elementDetail;
            var elementValueList = item.elementValueList;
            var number = Number(key) + 1;
            var id = "row-" + number;

            //动态生成一个div
            var div = document.createElement('div');
            div.id = id
            div.className = "row1"
            //向容器里初始化
            container.appendChild(div);

            var textButton = "<div class=\"title\">" + number + "." + Name + "</div>" +
                "            <div class=\"detail\">" + Detail + "</div>" +
                "            <div class=\"content\">" +
                "            <input id=\"userName\" type=\"text\" name=\"userName\">" +
                "            <input id=\"userButton\" type=\"button\" onclick=\"\" value=\"保存\">" +
                "      </div>";
            //初始化div
            document.getElementById(id).innerHTML = textButton;

            //初始化userName事件
            initUsername(elementValueList);
        }
        else if ("dakabutton" === elementType) {
            //打卡按钮
            var Name = item.elementName;
            var number = Number(key) + 1;
            var id = "row-" + number;

            var div = document.createElement('div');
            div.id = id;
            div.className = "row4";

            // 将新创建的div添加到container中  
            container.appendChild(div);

            var dakabutton = "<div class=\"daka\">" +
                "                   <div class=\"daka1\">" + Name + "</div>" +
                "                   <div class=\"current-time\"></div>" +
                "               </div>";
            document.getElementById(id).innerHTML = dakabutton;
            document.querySelector(".daka").onclick = function () {
                var param = {
                    formId: formId,
                    elemenList: []
                }
                for (var key in data.customElemenVoList) {
                    var item = data.customElemenVoList[key];
                    elementId = item.elementId;
                    elementType = item.elementType;
                    var number = Number(key) + 1;
                    var id = "row-" + number;
    
                
                    var elementValue = {
                        elementId: elementId,
                        elementType: elementType,
                        elementValueList: []
                    }
    
                    var div = document.querySelector("#" + id)
                    if ("checkBox" === elementType) {
                        var contentItemList = div.getElementsByClassName("contentItem");
                        console.log(contentItemList);
                        for (const key2 in contentItemList) {
                            var contentItem = contentItemList[key2];
                            
                            if (contentItem.checked) {
                                elementValue.elementValueList.push(contentItem.value);
                            }
                        }
                    }
                    else if ("text" === elementType) {
                        var textvalue = div.querySelector("#content-text").value;
                        elementValue.elementValueList.push(textvalue);
                    } else if ("textButton" === elementType) {
                        var usernamevalue = document.getElementById('userName').value;
                        elementValue.elementValueList.push(usernamevalue);
                    }
                    else if ("dakabutton" === elementType) {
                        continue;
                    }
                    param.elemenList.push(elementValue);
                    
                }
                console.log("提交的参数" + JSON.stringify(param));

                axios.post('http://172.22.144.233:8082/clockApp/api/form/clockIn', param)
                    .then(function (res) {
                        alert("签到成功！")
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            };

            // 每秒更新时间
            updateTime();
            //setInterval(updateTime, 1000);
        }
    };
}


// 更新当前时间的函数
function updateTime() {
    var now = moment().format('MM-DD  HH:mm:ss');
    document.querySelector('.current-time').innerHTML = now;
}

//尝试写的localstorage
function initUsername(elementValueList) {
    var username = localStorage.getItem('username');
    if (username) {
        document.getElementById('userName').value = username;
    } else {
        //回显数据
        if (elementValueList.length > 0) {
            localStorage.setItem('username', elementValueList[0]);
            document.getElementById('userName').value = elementValueList[0];
        }
    }
    document.getElementById('userButton').addEventListener('click', function () {
        var userName = document.getElementById('userName').value;
        localStorage.setItem('username', userName);
        alert("保存成功！");
    });
} 